<div id="keybindings" ng-controller="keybindingsCtrl">
  <div class="panel-header">
    <h3><i class="fa fa-keyboard-o"></i>Keybindings</h3>
  </div>
  <form class="searchKeybindings" novalidate>
    <div class="form-group">
      <input class="form-control" type="text" ng-model="searchForm.searchQuery" placeholder="Search for Keybindings">
    </div>
  </form>
  <table class="table">
    <thead>
      <td>
        Keystroke
      </td>
      <td>
        Command
      </td>
      <td>
        Context
      </td>
    </thead>
    <tbody>
      <tr ng-repeat="keybinding in keybindings | filter : { keystrokeSpaced : searchForm.searchQuery } | orderBy : 'context'">
        <td ng-bind-html="getHtmlForKeystroke(keybinding.keystroke)">
        </td>
        <td>
          {{ keybinding.command }}
        </td>
        <td>
          {{ keybinding.context }}
        </td>
      </tr>
    </tbody>
  </table>
</div>
